<div th:fragment="html" xmlns:th="http://www.w3.org/1999/xhtml">
    <script>
        function showProductsAsideCategorys(cid) {
            $("div.eachCategory[cid=" + cid + "]").css("background-color", "white");
            $("div.eachCategory[cid=" + cid + "] a").css("color", "#87CEFA");
            $("div.productsAsideCategorys[cid=" + cid + "]").show();
        }

        function hideProductsAsideCategorys(cid) {
            $("div.eachCategory[cid=" + cid + "]").css("background-color", "#e2e2e3");
            $("div.eachCategory[cid=" + cid + "] a").css("color", "#000");
            $("div.productsAsideCategorys[cid=" + cid + "]").hide();
        }

        function homePageRegisterListeners() {
            $("div.eachCategory").mouseenter(function () {
                var cid = $(this).attr("cid");
                showProductsAsideCategorys(cid);
            });
            $("div.eachCategory").mouseleave(function () {
                var cid = $(this).attr("cid");
                hideProductsAsideCategorys(cid);
            });
            $("div.productsAsideCategorys").mouseenter(function () {
                var cid = $(this).attr("cid");
                showProductsAsideCategorys(cid);
            });
            $("div.productsAsideCategorys").mouseleave(function () {
                var cid = $(this).attr("cid");
                hideProductsAsideCategorys(cid);
            });

            $("div.rightMenu span").mouseenter(function () {
                var left = $(this).position().left;
                var top = $(this).position().top;
                var width = $(this).css("width");
                var destLeft = parseInt(left) + parseInt(width) / 2;
                $("img#catear").css("left", destLeft);
                $("img#catear").css("top", top - 20);
                $("img#catear").fadeIn(500);

            });
            $("div.rightMenu span").mouseleave(function () {
                $("img#catear").hide();
            });

            var left = $("div#carousel-of-product").offset().left;
            $("div.categoryMenu").css("left", left - 20);
            $("div.categoryWithCarousel div.head").css("margin-left", left);
            $("div.productsAsideCategorys").css("left", left - 20);

            $("div.productsAsideCategorys div.row a").each(function () {
                var v = Math.round(Math.random() * 6);
                if (v == 1)
                    $(this).css("color", "#87CEFA");
            });
        }

        $(function () {

            var data4Vue = {
                uri: 'forehome',
                categories: []
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted: function () { //mounted　表示这个 Vue 对象加载成功了
                    linkDefaultActions();
                    this.load();
                },
                methods: {
                    load: function () {
                        var url = this.uri;
                        axios.get(url).then(function (response) {
                            vue.categories = response.data;
//                            console.log(vue.categories.eq(0))
                            vue.$nextTick(function () {
                                //要等渲染结束之后，才来进行监听，否则他们都没有被创建出来，监听也没有意义呀
                                homePageRegisterListeners();
                            })
                        });
                    }
                },
                filters: {
                    subTitleFilter: function (value) {
                        if (!value) return ''; //如果为空，则返回空字符串
                        return value.split(" ")[0]; //根据空格拆分，并且只获取数组第一个值
                    }
                }
            });


        });

    </script>


    <title>模仿天猫官网</title>
    <div class="homepageDiv">
        <div th:replace="include/fore/home/categoryAndcarousel::html"></div>
        <div th:replace="include/fore/home/homepageCategoryProducts::html"></div>
    </div>
</div>




